<template>
    <!-- 该组件为编辑订单中的已添加物品的组件 -->
    <view class="bogbox">
        <view class="userphone">
            <view class="header">
                <view><text>{{wp.wp_name}}</text>
                    <image @click="changShow" src="../../static/img/myhome/fc-edit@3x.png" style="margin-left: 100rpx;"></image>
                    <image @click="changDelete" src="../../static/img/myhome/fc-delete@3x.png" mode=""></image>
                </view>
            </view>
            <view class="main">
                <span>{{wp.unit == 0 ? "重量:" : "数量:"}}{{wp.nums > 0 ? (wp.nums + (wp.unit == 0 ? 'KG' : '个')) : ""}}</span>
                <span>单价: {{wp.unit_price ? (wp.unit_price + "元/" + (wp.unit == 0 ? 'KG' : '个')) : "待编辑"}}</span>
                <span>总价: {{wp.total_price || '待编辑'}}{{wp.total_price ? "元" : ""}}</span>
                <span>备注: {{wp.remsck || '无'}}</span>
            </view>
            <view class="img">
                <image v-for="item in wp.img" :key="item" :src="item" v-if="!$u.test.isEmpty(item)"></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            wp: Object,
            index: Number
        },
        data() {
            return {

            };
        },
        methods: {
            changShow() {
                this.$emit('showEdit');
            },
            changDelete() {
                this.$emit('wpDelete',this.index);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .userphone {
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;
        line-height: 98rpx;
        margin-bottom: 30rpx;

        text {
            font-size: 32rpx;
            color: #ff4200;
        }

        .main {
            height: 104rpx;
            width: 630rpx;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            border-bottom: 1px solid #EEEEEE;

            span {
                margin-top: 17rpx;
                height: 23rpx;
                font-size: 24rpx;
                line-height: 23rpx;
                color: #999999;
                margin-right: 69rpx;
            }
        }

        view:nth-child(1) {
            border-bottom: 1px solid #EEEEEE;
        }

        .header {
            image {
                float: right;
                margin-top: 30rpx;
                width: 50rpx;
                height: 50rpx;
                margin-left: 20rpx;
            }
        }
    }

    .showeditgood {
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 998;
    }

    .img {
        margin-top: 21rpx;
        margin-bottom: 25rpx;

        image {
            background-color: #EEEEEE;
            width: 71rpx;
            height: 71rpx;
            margin-right: 26rpx;
        }
    }
</style>
